<!--
 * @Description: 风险时间轴
 * @Author: 丁飞洋
 * @Date: 2025-09-10 14:20:52
 * @LastEditTime: 2025-09-23 16:42:09
 * @LastEditors: 丁飞洋
-->
<template>
  <div class="riskAxis">
    <div class="risk-axis-box" ref="container">
      <div class="axis" ref="axis">
        <div v-for="(item, i) in items" :key="i" @click="boxClick(i)" class="box c-p">
          <div class="left">
            <div class="circle"
              :style="{ backgroundColor: item.title == '高风险' ? '#cf1322' : item.title == '中风险' ? '#b7eb8f' : '#1677ff' }">
              {{
                item.title.substring(0, 1) }}</div>
          </div>
          <div class="right">
            <div class="title" :style="{ color: current == i ? '#1677ff' : 'rgba(0, 0, 0, 0.88)' }">{{ item.title }}
            </div>
            <div class="time" :style="{ color: current == i ? '#1677ff' : 'rgba(1, 4, 9, 0.46)' }">{{ item.time }}</div>
            <div :class="current == i ? 'underline' : ''">

            </div>
          </div>
          <div class="line" v-if="items.length !== i + 1"></div>

        </div>

      </div>
    </div>
    <div class="butt-left c-p" @click="scroll(-1)">
      <LeftCircleOutlined />
    </div>
    <div class="butt-right c-p" @click="scroll(1)">
      <RightCircleOutlined />
    </div>
  </div>
</template>

<script setup>
import { h, ref, onMounted } from 'vue'
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
// 首次加载
onMounted(() => {
  if (container.value) {
    container.value.addEventListener('scroll', updateScrollButtons);
    updateScrollButtons();
    scroll(items.value.length - 1);
  }
})
const current = ref(3);
const items = ref([
  {
    title: "高风险",
    time: "2025-09-23 14:39:16 "
  },
  {
    title: "中风险",
    time: "2025-09-23 14:39:16 "
  },
  {
    title: "低风险",
    time: "2025-09-23 14:39:16 "
  },
  {
    title: "低风险",
    time: "2025-09-23 14:39:16 "
  },
])
const boxClick = (value) => {
  current.value = value
}
// 
const container = ref(null);
const axis = ref(null);
const scrollLeftDisabled = ref(true);
const scrollRightDisabled = ref(false);
const boxWidth = 190; // 每个box的宽度
function scroll(direction) {
  if (!container.value) return;
  const scrollAmount = boxWidth * direction;
  container.value.scrollBy({
    left: scrollAmount,
    behavior: 'smooth'
  });
  // 更新禁用状态
  updateScrollButtons();
}
function updateScrollButtons() {
  if (!container.value) return;
  scrollLeftDisabled.value = container.value.scrollLeft <= 0;
  scrollRightDisabled.value = container.value.scrollLeft + container.value.clientWidth >= axis.value.scrollWidth;
}

</script>

<style lang="less" scoped>
.c-p {
  cursor: pointer;
}

.riskAxis {
  position: relative;
  width: 100%;
  height: 80px;

  .risk-axis-box {
    width: calc(100% - 20px);
    height: 100px;
    overflow: hidden;

    .axis {
      display: flex;
      justify-content: flex-start;

      .box {
        position: relative;
        height: 50px;
        display: flex;
        align-items: center;

        .left {
          width: 38px;
          padding: 0px 6px;

          .circle {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 12px;
          }

          .g {
            background-color: #cf1322;
          }

          .z {
            background-color: #b7eb8f;
          }

          .d {
            background-color: #1677ff;
          }
        }

        .right {
          width: 70px;

          .title {
            font-size: 14px;
            font-weight: 600;
            // color: rgba(0, 0, 0, 0.88);
          }

          .time {
            font-size: 12px;
            // color: rgba(1, 4, 9, 0.46);
          }

          .underline {
            position: absolute;
            left: 0px;
            bottom: -10px;
            display: block;
            width: 108px;
            height: 2px;
            background: linear-gradient(90deg, transparent, #1677ff, transparent);
            margin-top: 10px;
            animation: underline-grow 0.5s ease-out;
          }

          @keyframes underline-grow {
            from {
              width: 0;
            }

            to {
              width: 108px;
            }
          }
        }

        .right:hover {
          .title {
            color: #1677ff;
          }

          .time {
            color: #1677ff;
          }
        }

        .line {
          width: 82px;
          height: 2px;
          border-top: 2px dashed #1677ff;
        }


      }
    }
  }



  .butt-left {
    position: absolute;
    top: 15px;
    left: -20px;
    width: 20px;
    height: 20px;
  }

  .butt-left:hover {
    color: #1677ff;
  }

  .butt-right {
    position: absolute;
    top: 15px;
    right: -10px;
    width: 20px;
    height: 20px;
  }

  .butt-right:hover {
    color: #1677ff;
  }

}


/* 整体样式 */
::-webkit-scrollbar {
  width: 12px;
  /* 垂直滚动条宽度 */
  height: 12px;
  /* 水平滚动条高度 */
}

/* 轨道样式 */
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 6px;
}

/* 滑块样式 */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 6px;
}

/* 悬停滑块 */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>
